import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components'
import { AtFloatLayout } from 'taro-ui'
// import PropTypes from 'prop-types';
import './keyboard.scss'
type Prop = {
	mode: number,
	isOpened: boolean,
	onChange: Function,
	onDelete: Function
}
type State = {
	mode: number,
	isOpened: boolean,
	provinceOneArr: Array<string>,
	provinceTwoArr: Array<string>,
	provinceThreeArr: Array<string>,
	provinceForthArr: Array<string>,
	numArr: Array<string>,
	lineOneWordsArr: Array<string>,
	lineTwoWordsArr: Array<string>,
	lineThreeWordsArr: Array<string>,
	lineOtherWordsArr: Array<string>
};

export default class KeyBoard extends Component<Prop, State> {
	protected provinceOneArr: Array<string>
	static options = {
		addGlobalClass: true
	}
	constructor(props) {
		super(props)
		this.state = {
			mode: 1,
			isOpened: false,
			provinceOneArr: ['京', '沪', '粤', '津', '浙', '苏', '湘', '渝'],
			provinceTwoArr: ['云', '皖', '陕', '桂', '新', '青', '琼', '闽'],
			provinceThreeArr: ['蒙', '辽', '鲁', '晋', '吉', '冀', '黑', '甘'],
			provinceForthArr: ['鄂', '贵', '川', '藏', '宁', '豫', '赣'],
			numArr: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
			lineOneWordsArr: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P'],
			lineTwoWordsArr: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
			lineThreeWordsArr: ['Z', 'X', 'C', 'V', 'B', 'N', 'M'],
			lineOtherWordsArr: ['港', '澳', '警', '领', '使', '学']
		}
		this.provinceOneArr = ['京', '沪', '粤', '津', '浙', '苏', '湘', '渝']
	}
	handleSelectProvice(key) {
		Taro.vibrateShort().then(() => { })
		this.props.onChange(key);
	}

	handleSelectKeys(key) {
		Taro.vibrateShort().then(() => { })
		this.props.onChange(key);
	}

	handleDelete() {
		Taro.vibrateShort().then(() => { })
		this.props.onDelete();
	}

	UNSAFE_componentWillReceiveProps(prevProps) {
		console.log('prevProps', prevProps)
		if (prevProps.isOpened !== this.state.isOpened) {
			this.setState({
				isOpened: prevProps.isOpened
			})
		}
		if (prevProps.mode !== this.state.mode) {
			this.setState({
				mode: prevProps.mode
			})
		}
	}

	isProvinceView() {
		const { isOpened, provinceOneArr, provinceTwoArr, provinceThreeArr, provinceForthArr } = this.state

		const provinceOneView = provinceOneArr.map(key => (
			<View key={key}
				className='key-item'
				onClick={this.handleSelectProvice.bind(this, key)}>
				{key}
			</View>
		))

		const provinceTwoView = provinceTwoArr.map(key => (
			<View key={key}
				className='key-item'
				onClick={this.handleSelectProvice.bind(this, key)}>
				{key}
			</View>
		))

		const provinceThreeView = provinceThreeArr.map(key => (
			<View key={key}
				className='key-item'
				onClick={this.handleSelectProvice.bind(this, key)}>
				{key}
			</View>
		))

		const provinceForthView = provinceForthArr.map(key => (
			<View key={key}
				className='key-item'
				onClick={this.handleSelectProvice.bind(this, key)}>
				{key}
			</View>
		))

		return (
			<View className='province-wrap'>
				<AtFloatLayout isOpened={isOpened}>
					<View className="province-keyboard flex-column">
						<View className='flex-row'>
							{provinceOneView}
						</View>
						<View className='flex-row'>
							{provinceTwoView}
						</View>
						<View className='flex-row'>
							{provinceThreeView}
						</View>
						<View className='flex-row'>
							{provinceForthView}
							<View className='key-item icon' onClick={this.handleDelete.bind(this)}></View>
						</View>
					</View>
				</AtFloatLayout>
			</View>

		)
	}

	isWordsView() {
		const { isOpened, numArr, lineOneWordsArr, lineTwoWordsArr, lineThreeWordsArr, lineOtherWordsArr } = this.state
		return (
			<View className="words-wrap province-wrap">
				<AtFloatLayout isOpened={isOpened}>
					<View className="words-keyboard flex-column">
						<View className='flex-row'>
							{numArr.map((num) =>
								<View key={num} className='item number' onClick={this.handleSelectKeys.bind(this, num)}>{num}</View>
							)}
						</View>
						<View className='flex-row'>
							{lineOneWordsArr.map((word) =>
								<View key={word} className='item line-one-words' onClick={this.handleSelectKeys.bind(this, word)}>{word}</View>
							)}
						</View>
						<View className='flex-row'>
							{lineTwoWordsArr.map((word) =>
								<View key={word} className='item line-two-words' onClick={this.handleSelectKeys.bind(this, word)}>{word}</View>
							)}
						</View>
						<View className='flex-row'>
							{lineThreeWordsArr.map((word) =>
								<View key={word} className='item line-three-words' onClick={this.handleSelectKeys.bind(this, word)}>{word}</View>
							)}
						</View>
						<View className='flex-row'>
							{lineOtherWordsArr.map((word) =>
								<View key={word} className='item other' onClick={this.handleSelectKeys.bind(this, word)}>{word}</View>
							)}
							<View className='item icon' onClick={this.handleDelete.bind(this)}></View>
						</View>
					</View>
				</AtFloatLayout>
			</View>
		)
	}
	render() {
		return (
			<View className='keyboard'>
				{this.state.mode === 0 ? this.isProvinceView() : this.isWordsView()}
			</View>
		)
	}
}
